<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=us-ascii" />
  <title>Moving Boxes</title>

  <!-- Required CSS -->
  <link type="text/css" href="css/movingboxes.css" media="screen" charset="utf-8" rel="stylesheet"  />
  <!--[if lt IE 9]>
  <link type="text/css" href="css/movingboxes-ie.css" rel="stylesheet" media="screen" />
  <![endif]-->

  <!-- Required script -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" charset="utf-8"></script>
  <script type="text/javascript" src="js/jquery.movingboxes.js" charset="utf-8"></script>

  <!-- Demo only -->
  <link type="text/css" href="demo/demo.css" media="screen" charset="utf-8" rel="stylesheet"  />
  <script type="text/javascript" src="demo/demo.js"></script>
</head>

<body>
 <div id="wrapper">
  <div id="title">
   <a href="http://github.com/chriscoyier/MovingBoxes"><img src="demo/movingboxes.png" alt="moving boxes" /></a>
  </div>

  <br><br>
  <div class="dlinks">
   Go to Panel: <span></span>
  </div>
  <br>

  <div class="buttons">
   <button class="add">&nbsp;Add Panel&nbsp;</button>
   <button class="remove">&nbsp;Remove Panel&nbsp;</button>
  </div>
  <br>

  <!-- Slider #1 -->
  <ul id="slider-one">

   <li>
    <img src="demo/1.jpg" alt="picture" />
    <h2>News Heading</h2>
    <p>Add a short exerpt here... <a href="http://flickr.com/photos/justbcuz/112479862/">more</a></p>
   </li>

   <li>
    <img src="demo/2.jpg" alt="picture" />
    <h2>News Heading</h2>
    <p>Add a short exerpt here... <a href="http://flickr.com/photos/joshuacraig/2698975899/">more</a> and a whole lot more text goes here, so we can see the height adjust.</p>
   </li>

   <li>
    <img src="demo/3.jpg" alt="picture" />
    <h2>News Heading</h2>
    <p>Add a short exerpt here... <a href="http://flickr.com/photos/ruudvanleeuwen/468309897/">more</a></p>
   </li>

   <li>
    <img src="demo/4.jpg" alt="picture" />
    <h2>News Heading</h2>
    <p>Add a short exerpt here... <a href="http://flickr.com/photos/emikohime/294092478/">more</a></p>
   </li>

   <li>
    <img src="demo/5.jpg" alt="picture" />
    <h2>News Heading</h2>
    <p>Add a short exerpt here... <a href="http://www.flickr.com/photos/fensterbme/499006584/">more</a></p>
   </li>

   <li>
    <img src="demo/6.jpg" alt="picture" />
    <h2>News Heading</h2>
    <p>Add a short exerpt here... <a href="#">more</a></p>
   </li>

   <li>
    <img src="demo/7.jpg" alt="picture" />
    <h2>News Heading</h2>
    <p>Add a short exerpt here... <a href="#">more</a></p>
   </li>

  </ul> <!-- end Slider #1 -->

  <br><br>

  <!-- Slider #2 (images of slider #1 reversed) -->
  <div id="slider-two">

   <div>
    <img src="demo/5.jpg" alt="picture" />
    <h2>News Heading - <span>Lisa</span></h2>
    <p>Add a short exerpt here... <a href="http://flickr.com/photos/fensterbme/499006584/">more</a></p>
   </div>

   <div>
    <img src="demo/4.jpg" alt="picture" />
    <h2>News Heading - <span>Monica</span></h2>
    <p>Add a short exerpt here... <a href="http://flickr.com/photos/emikohime/294092478/">more</a></p>
   </div>

   <div>
    <img src="demo/3.jpg" alt="picture" />
    <h2>News Heading - <span>Lin</span></h2>
    <p>Add a short exerpt here... <a href="http://flickr.com/photos/ruudvanleeuwen/468309897/">more</a></p>
   </div>

   <div>
    <img src="demo/2.jpg" alt="picture" />
    <h2>News Heading - <span>Shiela</span></h2>
    <p>Add a short exerpt here... <a href="http://flickr.com/photos/joshuacraig/2698975899/">more</a></p>
   </div>

   <div>
    <img src="demo/1.jpg" alt="picture" />
    <h2>News Heading - <span>Joanne</span></h2>
    <p>Add a short exerpt here... <a href="http://flickr.com/photos/justbcuz/112479862/">more</a></p>
   </div>

  </div>

  <br><br>

</div> <!-- end wrapper -->

</body>
</html>
